<template>
  <div class="login-container flex">
    <div class="login-left">
      <div class="logoP">
        <img src="../../assets/xiaobaixie.png" alt="" class="logo" />
        <span>小白鞋EAM</span>
      </div>
      <div class="loginP">
        <img
          v-if="themeConfig.primary == '#02AD82'"
          src="../../assets/loginPictrueGreen.png"
          alt=""
        />
        <img
          v-else-if="themeConfig.primary == '#063C74'"
          src="../../assets/loginPictrueBlue.png"
          alt=""
        />
        <img
          v-else-if="themeConfig.primary == '#514FC2'"
          src="../../assets/loginPictruePurple.png"
          alt=""
        />
      </div>
    </div>
    <div class="login-right flex">
      <div class="login-right-warp flex-margin">
        <span class="login-right-warp-one"></span>
        <span class="login-right-warp-two"></span>
        <div class="login-right-warp-mian">
          <!-- <div class="login-right-warp-main-title">{{ getThemeConfig.globalTitle }}</div> -->
          <div class="login-right-warp-main-title">
            <div v-if="state.isScan" class="backLogin" @click="backLogin">
              ←返回登录
            </div>
            <div>
              {{ !state.isScan ? '小白鞋EAM·设备资产管理系统' : '忘记密码' }}
            </div>
          </div>
          <div class="login-right-warp-main-form">
            <div v-if="!state.isScan">
              <Account
                @forgetPwd="forgetPwd"
                @goRegister="goRegister"
                :accountPhone="accountPhone"
                :accountPWD="accountPWD"
                :loginState="loginState"
                :portrait="portrait"
                :realName="realName"
                :thirdId="thirdId"
                :registerType="registerType"
              ></Account>
            </div>
            <div v-else>
              <EditPassword
                @pwd="pwd"
                :userAccount="userAccount"
              ></EditPassword>
              <div class="tigs" style="text-align: center">
                <div>若您还未绑定手机号，可联系我们重置密码，</div>
                <div>联系电话：17775807822</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bqInfo">©2016-2023 长沙豆子信息技术有限公司版权所有</div>
    </div>
  </div>
</template>
<script lang="ts">
const loginState = ref(0) //登录方式
const registerType = ref(false)
export default defineComponent({
  beforeRouteEnter(to, from, next) {
    if (from.name == 'loginQR' && from.query.bindType == '1') {
      loginState.value = 3
      registerType.value = true
      next()
    } else {
      loginState.value = 0
      registerType.value = false
      next()
    }
  }
})
</script>
<script setup lang="ts" name="loginIndex">
import CryptoJS from 'crypto-js'
import { Local } from '/@/utils/storage'
import {
  defineAsyncComponent,
  onMounted,
  reactive,
  computed,
  ref,
  defineComponent
} from 'vue'
import { storeToRefs } from 'pinia'
import { useThemeConfig } from '/@/stores/themeConfig'
import { NextLoading } from '/@/utils/loading'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
// 引入组件
const Account = defineAsyncComponent(
  () => import('/@/views/login/component/account.vue')
)
const EditPassword = defineAsyncComponent(
  () => import('/@/views/login/component/EditPassword.vue')
)

// 定义变量内容
const storesThemeConfig = useThemeConfig()
const { themeConfig } = storeToRefs(storesThemeConfig)
const state = reactive({
  tabsActiveName: 'account',
  isScan: false
})

// 获取布局配置信息
const getThemeConfig = computed(() => {
  return themeConfig.value
})

//微信头像与微信名
const portrait = ref(route.query.portrait)
const realName = ref(route.query.realName)
const thirdId = ref(route.query.thirdId)

const accountPhone = ref('')
const accountPWD = ref('')
const userAccount = ref('')
const forgetPwd = (val: any) => {
  userAccount.value = val
  state.isScan = true
}
const pwd = (val: any) => {
  accountPhone.value = val
  state.isScan = false
}

const backLogin = () => {
  state.isScan = false
}

const goRegister = (val: any) => {
  loginState.value = val
  if (val == 0) {
    registerType.value = false
  }
}

// 小白鞋首页新标签跳转传参
const getAccount = () => {
  const url = window.location.href
  const index = url.lastIndexOf('params=')
  if (index != -1) {
    const obj = JSON.parse(
      decodeURIComponent(url.substring(index + 7, url.length))
    )
    // AES解密
    const key = '0123456789abcdef' // 16字节的密钥
    // 将密钥转换为WordArray对象
    const keyArray = CryptoJS.enc.Utf8.parse(key)
    // 将加密后的密文转换为CipherParams对象，再 toString(CryptoJS.enc.Utf8) 将解密后的数据转换为UTF-8字符串
    const decryptedAcnt = CryptoJS.AES.decrypt(obj.userAccount, keyArray, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    }).toString(CryptoJS.enc.Utf8)
    const decryptedPwd = CryptoJS.AES.decrypt(obj.userPwd, keyArray, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    }).toString(CryptoJS.enc.Utf8)

    // 输入框赋值
    Local.remove('saveaccount')
    accountPhone.value = decryptedAcnt
    accountPWD.value = decryptedPwd
  }
}

// 页面加载时
onMounted(() => {
  // getAccount()
  NextLoading.done()
})
</script>

<style scoped lang="scss">
.login-container {
  height: 100%;
  background: var(--el-color-white);

  .login-left {
    width: 45%;
    height: 100%;
    background: var(--el-color-primary);
    .logoP {
      position: absolute;
      left: 24px;
      top: 24px;
      font-size: 26px;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 30px;
      color: rgba(255, 255, 255, 1);
    }

    .loginP {
      height: 100%;
      display: flex;
      align-items: center; /*垂直居中*/
      justify-content: center; /*水平居中*/
      > img {
        width: 785px;
        height: 774px;
      }
    }
  }

  .login-right {
    position: relative;
    width: 55%;

    .bqInfo {
      position: absolute;
      // right: 395px
      left: 50%;
      transform: translateX(-50%);
      bottom: 24px;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      color: rgba(99, 99, 99, 0.8);
    }

    .login-right-warp {
      border: 1px solid var(--el-color-primary-light-3);
      border-radius: 3px;
      width: 550px;
      height: 600px;
      position: relative;
      overflow: hidden;
      background-color: var(--el-color-white);

      .login-right-warp-one,
      .login-right-warp-two {
        position: absolute;
        display: block;
        width: inherit;
        height: inherit;

        &::before,
        &::after {
          content: '';
          position: absolute;
          z-index: 1;
        }
      }

      .login-right-warp-one {
        &::before {
          filter: hue-rotate(0deg);
          top: 0px;
          left: 0;
          width: 100%;
          height: 3px;
          background: linear-gradient(
            90deg,
            transparent,
            var(--el-color-primary)
          );
          animation: loginLeft 3s linear infinite;
        }

        &::after {
          filter: hue-rotate(60deg);
          top: -100%;
          right: 2px;
          width: 3px;
          height: 100%;
          background: linear-gradient(
            180deg,
            transparent,
            var(--el-color-primary)
          );
          animation: loginTop 3s linear infinite;
          animation-delay: 0.7s;
        }
      }

      .login-right-warp-two {
        &::before {
          filter: hue-rotate(120deg);
          bottom: 2px;
          right: -100%;
          width: 100%;
          height: 3px;
          background: linear-gradient(
            270deg,
            transparent,
            var(--el-color-primary)
          );
          animation: loginRight 3s linear infinite;
          animation-delay: 1.4s;
        }

        &::after {
          filter: hue-rotate(300deg);
          bottom: -100%;
          left: 0px;
          width: 3px;
          height: 100%;
          background: linear-gradient(
            360deg,
            transparent,
            var(--el-color-primary)
          );
          animation: loginBottom 3s linear infinite;
          animation-delay: 2.1s;
        }
      }

      .login-right-warp-mian {
        display: flex;
        flex-direction: column;
        height: 100%;

        .login-right-warp-main-title {
          height: 100px;
          line-height: 100px;
          font-size: 32px;
          font-weight: 700;
          text-align: center;
          letter-spacing: 3px;
          animation: logoAnimation 0.3s ease;
          animation-delay: 0.3s;
          color: var(--el-text-color-primary);

          .backLogin {
            line-height: 20px;
            font-size: 14px;
            position: absolute;
            left: 45px;
            top: 50px;
            cursor: pointer;
          }
        }

        .login-right-warp-main-form {
          flex: 1;
          padding: 0 50px 50px;
          position: relative;
        }

        .tigs {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
        }
      }
    }
  }
}

.logo {
  width: 80px;
}
</style>
